const useMove = function (el: HTMLElement, callback: Function) {
    el.style.position = 'fixed';
    let offsetX: number;
    let offsetY: number;
    let oL: number;
    let oT: number;
    let oLeft: number;
    let oTop: number;
    const browser = {
        versions: (function () {
            const u = navigator.userAgent
            return {
                mobile: !!u.match(/AppleWebKit.*Mobile.*/)
            }
        })(),
    }
    if (!browser.versions.mobile) {
        if (el != null) {
            el.addEventListener('mousedown', function (event: any) {
                /// drag
                if (event.path[0].className === 'layui-layer-title') {
                    if (event.button == 0 && el != null) {
                        const lexObj: any = getComputedStyle(el)
                        offsetX = event.pageX - el.offsetLeft + parseInt(lexObj['margin-left'])
                        offsetY = event.pageY - el.offsetTop + parseInt(lexObj['margin-right'])
                        const move = function (event: any) {
                            if (el != null) {
                                let x = event.pageX - offsetX
                                let y = event.pageY - offsetY
                                if (x < 0) {
                                    x = 0
                                } else if (
                                    x > document.documentElement.clientWidth - el.offsetWidth
                                ) {
                                    x = document.documentElement.clientWidth - el.offsetWidth
                                }
                                if (y < 0) {
                                    y = 0
                                } else if (
                                    y > document.documentElement.clientHeight - el.offsetHeight
                                ) {
                                    y = document.documentElement.clientHeight - el.offsetHeight
                                }
                                el.style.left = x + 'px'
                                el.style.top = y + 'px'
                                callback(el.style.width, el.style.height,x,y)
                            }
                            return false
                        }
                        document.addEventListener('mousemove', move)
                        const stop = function () {
                            document.removeEventListener('mousemove', move)
                            document.removeEventListener('mouseup', stop)
                        }
                        document.addEventListener('mouseup', stop)
                    }
                }

                /// resize
                if (event.path[0].className === 'layui-layer-resize') {
                    if (event.button == 0 && el != null) {
                        var x = el.offsetLeft;
                        var y = el.offsetTop;
                        const move = function (moveEvent: any) {
                            if (el != null) {
                                var offsetX = moveEvent.clientX;
                                var offsetY = moveEvent.clientY;
                                var w = offsetX - x;
                                var h = offsetY - y;
                                // todo 先写死，和原版layer一致
                                w < 260 && (w = 260);
                                h < 115 && (h = 115);
                                el.style.width = (w + 'px')
                                el.style.height = (h+ 'px')
                                callback(el.style.width, el.style.height,x,y)

                            }
                            return false
                        }
                        document.addEventListener('mousemove', move)
                        const stop = function () {
                            document.removeEventListener('mousemove', move)
                            document.removeEventListener('mouseup', stop)
                        }
                        document.addEventListener('mouseup', stop)
                    }
                }
                /// 窗体拉伸
                return false
            })
        }
    } else {
        if (el != null) {
            const maxW = document.body.clientWidth - el.offsetWidth
            const maxH = document.body.clientHeight - el.offsetHeight
            const defaultEvent = function (e: any) {
                e.preventDefault()
            }
            el.addEventListener('touchstart', function (e: any) {
                const ev = e || window.event
                const touch = ev.targetTouches[0]
                oL = touch.clientX - el.offsetLeft
                oT = touch.clientY - el.offsetTop
                document.addEventListener('touchmove', defaultEvent, false)
                el.addEventListener('touchmove', function (e: any) {
                    const ev = e || window.event
                    const touch = ev.targetTouches[0]
                    oLeft = touch.clientX - oL
                    oTop = touch.clientY - oT
                    if (oLeft < 0) {
                        oLeft = 0
                    } else if (oLeft >= maxW) {
                        oLeft = maxW
                    }
                    if (oTop < 0) {
                        oTop = 0
                    } else if (oTop >= maxH) {
                        oTop = maxH
                    }
                    el.style.left = oLeft + 'px'
                    el.style.top = oTop + 'px'
                })
                el.addEventListener('touchend', function () {
                    document.removeEventListener('touchmove', defaultEvent)
                })
            })
        }
    }
}

export default useMove;